<template>
  <div class="app-container">
    <el-row :gutter="0" class="el-card is-always-shadow el-card__body content_h">
      <el-col class="title_top">
        <div class="title_top_E">Time Allocation</div>
        <div class="title_top_C">时间调拨</div>
      </el-col>
      <el-col class="screen_case">
        <el-row>
          <el-col :span="4">
            <div class="screen_case_amount mb20">
              <span class="screen_case_amount_lable">机构数量：</span>
              <span class="screen_case_amount_value">{{ total }}</span>
            </div>
            <el-button :type="cheall ? 'primary' : 'info'" class="ch_button allotbtn " @click="additions">
              <img class="ch_button_img" src="../../assets/iconfont/check-circle.png" alt="" srcset="">
              <div>时间调拨</div>
            </el-button>
          </el-col>
          <el-col :span="5">
            <screenSelect title="机构名称" type='input' v-model="queryFrom.hospitalName" :isValue='queryFrom.hospitalName'
              placeholder="请输入机构名称" @transfer="valueHeldS($event, 'hospitalName')" class="mb15" />
            <screenSelect title="机构状态" type='select' v-model="queryFrom.status" :isValue='queryFrom.status'
              placeholder="请选择" @transfer="valueHeldS($event, 'status')" :options="statusoptions" class="" />
          </el-col>
          <el-col :span="15">
            <el-row style="display: flex;flex-direction: column;">
              <el-col :span="18" style="display: flex;">
                <screenSelect title="机构地区" type='select' v-model="queryFrom.province" :isValue='queryFrom.province'
                  placeholder="请选择省" @transfer="valueHeldS($event, 'province')" :options="ProvinceList" class="mb15" />
                <screenSelect title="" type='select' v-model="queryFrom.city" :isValue='queryFrom.city'
                  placeholder="请选择市" @transfer="valueHeldS($event, 'city')" :options="CityList" class="mb15" />
                <screenSelect title="" type='select' v-model="queryFrom.areas" :isValue='queryFrom.areas'
                  placeholder="请选择区" @transfer="valueHeldS($event, 'areas')" :options="AreaList" class="mb15" />
              </el-col>
              <el-col :span="12">
                <div style="display: flex;">
                  <screenSelect title="合作类型" type='select' v-model="queryFrom.cooperationType"
                    :isValue='queryFrom.cooperationType' placeholder="请选择"
                    @transfer="valueHeldS($event, 'cooperationType')" :options="cooperationoptions" class="" />
                  <el-button type="primary" class="ch_button" @click="search">
                    <img class="ch_button_img" src="../../assets/iconfont/zoom-out.png" alt="" srcset="">
                    <div>搜索</div>
                  </el-button>
                  <el-button type="primary" class="ch_button" @click="reset">
                    <img class="ch_button_img" src="../../assets/iconfont/rotate-ccw.png" alt="" srcset="">
                    <div>选项重置</div>
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-col>

        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="0" class="card_content">
      <template v-for="(item, index) in cardData">
        <smallCard style="cursor: pointer;border: 2px solid #00000000;" :title="item.hospitalName"
          :subhead="item.subhead"
          :subheading="item.settlementUnit == 2 ? ('小时时间池：' + item.availableHours) : item.settlementUnit == 3 ? ('机构池：' + (item.availableNum == null ? 0 : item.availableNum)) : ('天数时间池：' + item.availableDays)"
          @click.native="multifunctionS(item.hospitalId, index)"
          :style="indexAC == index ? 'border:2px solid #0584FE' : ''" :img="item.hospitalAvatarUrl"
          :line="item.status == 0 ? true : false" buttons="2" />
      </template>
      <div class="paginationblock" v-if="cardData.length > 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageData.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.pageSize"
          :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-row>

    <!-- 新增 编辑 -->
    <el-dialog :visible.sync="rentDialogVisible" custom-class="addeteDialog" :modal='true'>
      <div slot="title">
        <div class="title_top_E">Operation Time Allocation</div>
        <div class="title_top_C">操作时间调拨</div>
      </div>
      <div class="addeteDialog_conter" v-if="viewFrom">
        <div class="top_content">
          <div class="top_content_item">
            <div class="dialog_title_ch_conter_left">
              <img :src="viewFrom.hospitalAvatarUrl" alt="" srcset="" style="border-radius: 50%;">
              <div class="quan" :class="true ? 'on_line' : 'off_line'"></div>
            </div>
            <el-row :gutter="20" style="flex: 1;">
              <el-col class="top_content_item_title">
                {{ viewFrom.hospitalName }}
              </el-col>
              <el-col :span="8">
                <span class="top_content_item_lable">机构等级：</span>
                <span class="top_content_item_value">{{ gradeoptions[viewFrom.grade].label }}</span>
              </el-col>
              <el-col :span="8">
                <span class="top_content_item_lable">所在地区：</span>
                <span class="top_content_item_value">{{ viewFrom.provinceName }} {{ viewFrom.cityName }} {{
      viewFrom.areasName
    }}</span>
              </el-col>
              <el-col :span="8">
                <span class="top_content_item_lable">机构联系人：</span>
                <span class="top_content_item_value">{{ viewFrom.contacts }}</span>
              </el-col>
              <el-col :span="8">
                <span class="top_content_item_lable">联系电话：</span>
                <span class="top_content_item_value">{{ viewFrom.contactsPhone }}</span>
              </el-col>
              <el-col :span="8">
                <span class="top_content_item_lable">当前科室数量：</span>
                <span class="top_content_item_value">{{ viewFrom.totalDepartment }}</span>
              </el-col>
              <el-col :span="8">
                <span class="top_content_item_lable">创建时间：</span>
                <span class="top_content_item_value">{{ parseTime(viewFrom.createTime, '{y}.{m}.{d}') }}</span>
              </el-col>
            </el-row>
            <div class="top_content_item_foot" v-if="viewFrom.settlementUnit == 3">
              <div class="top_content_item_footT"><span>{{ viewFrom.availableNum }}</span><span>次</span>
                <div>机构池</div>
              </div>
            </div>
            <div class="top_content_item_foot" v-else>
              <div class="top_content_item_footT"><span>{{ viewFrom.availableHours }}</span><span>小时</span>
                <div>医院时间池</div>
              </div>
              <div class="top_content_item_footT"><span>{{ viewFrom.availableDays }}</span><span>天</span>
                <div>医院天数池</div>
              </div>
            </div>
          </div>
          <div class="top_content_item_s">
            <el-row>
              <el-col :span="12" class="mt20">
                <screenSelect title="调拨类型：" type='select' :disabled="true" v-model="viewFrom.settlementUnit"
                  :isValue='viewFrom.settlementUnit == 2 ? 0 : viewFrom.settlementUnit == 3 ? 2 : 1' placeholder="次"
                  @transfer="valueHeld($event, 'settlementUnit')" :options="transferTypeoption" width='90%'
                  position="top" />
              </el-col>
              <el-col :span="12" class="mt20">
                <screenSelect title="调拨服务商：" type='select' v-model="addFrom.serviceName" :isValue='addFrom.serviceName'
                  placeholder="请选择调拨服务商" @transfer="valueHeld($event, 'serviceName')" :options="provoption" width='90%'
                  position="top" />
              </el-col>
              <el-col :span="12" class="mt20">
                <screenSelect :title="viewFrom.settlementUnit == 3 ? '调拨数量：' : '调拨时间数量：'" type='input'
                  v-model="addFrom.transferNumber" :isValue='addFrom.transferNumber'
                  :placeholder="viewFrom.settlementUnit == 3 ? '请输入需要调拨的数量：' : '请输入需要调拨的时间数量'"
                  @transfer="valueHeld($event, 'transferNumber')" width='90%' position="top" />
              </el-col>
              <el-col>
                <screenSelect title="备注：" class="mt20" type='textarea' :rows="8" v-model="addFrom.remark"
                  :isValue='addFrom.remark' placeholder="请输入备注内容" @transfer="valueHeld($event, 'remark')" width='100%'
                  position="top" />
              </el-col>
            </el-row>


          </div>
        </div>
        <div class="footer_submit">
          <el-button type="primary" class="ch_button_seav" @click="addsubmit">
            <img class="ch_button_img_seav" src="../../assets/iconfont/icon-seavicon.png" alt="" srcset="">
            <div>提交</div>
          </el-button>
        </div>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import construction from '@/components/construction/index.vue'
import screenSelect from '@/components/screenSelect/index.vue'
import smallCard from '@/components/smallCard/index.vue'
import { getHospitalList, getHospitalDetail, getHospitaPagelList } from '@/api/organizational'
import { getProvince, getCity, getArea, getProvidersList } from '@/api/common'
import { getTimeAdd } from '@/api/timeallot'
import {
  mapGetters
} from 'vuex'
export default {
  name: "timeallot",
  components: {
    construction,
    screenSelect,
    smallCard
  },
  computed: {
    ...mapGetters([
      'permissionList'
    ])
  },
  watch: {
    'queryFrom.province': {
      handler(newVal, oldVal) {
        this.queryFrom.city = ''
        this.queryFrom.areas = ''
        if (newVal) {
          this.getCity()
        }
      }
    },
    'queryFrom.city': {
      handler(newVal, oldVal) {
        this.queryFrom.areas = ''
        if (newVal) {
          this.getArea()
        }
      }
    }
  },
  data() {
    return {
      rentDialogVisible: false,
      viewFrom: null,
      addFrom: {},
      gradeoptions: [{
        value: 0,
        label: '一甲'
      }, {
        value: 1,
        label: '二甲'
      }, {
        value: 2,
        label: '三甲'
      }, {
        value: 3,
        label: '二已'
      }],
      statusoptions: [
        {
          value: 0,
          label: '运营中'
        }, {
          value: 1,
          label: '停运'
        }
      ],
      cardData: [],
      imageUrl: '',
      ProvinceList: [],
      CityList: [],
      AreaList: [],
      provoption: [],
      transferTypeoption: [
        {
          value: 0,
          label: '小时'
        },
        {
          value: 1,
          label: '天'
        },
        {
          value: 2,
          label: '次'
        }
      ],
      cooperationoptions: [
        {
          value: 0,
          label: '销售试用中'
        }, {
          value: 1,
          label: '销售试用结束'
        }, {
          value: 2,
          label: '销售运行'
        }, {
          value: 3,
          label: '合作试用中'
        }, {
          value: 4,
          label: '合作试用结束'
        }, {
          value: 5,
          label: '合作运行'
        }
      ],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      queryFrom: {
        province: '',
        city: '',
        areas: '',
        status: '',
        cooperationType: '',
        hospitalName: ''
      },
      total: 0,
      indexAC: null,
      cheall: false,
      hospitalId: null
    };
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy();
  },
  mounted() {
    this.getList()
    this.getProvince()
    this.getPrList()
  },

  methods: {
    getPrList() {
      this.provoption = []
      getProvidersList().then(res => {
        if (res.code == 200) {
          res.data.providerList.map(item => {
            this.provoption.push({
              value: item,
              label: item
            })
          })
        }
      })
    },
    getList() {
      let that = this
      const loading = that.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getHospitaPagelList(this.queryFrom, this.pageData).then(res => {
        if (res.code == 200) {
          that.cardData = res.data.hospitalPage.records
          this.total = res.data.hospitalPage.total
          loading.close();
        }
      })
    },
    getProvince() {
      getProvince().then(res => {
        if (res.code == 200) {
          res.data.provinceList.map(item => {
            item.label = item.name
            item.value = item.id
          })
          this.ProvinceList = res.data.provinceList
        }
      })
    },
    getCity() {
      getCity(this.queryFrom.province).then(res => {
        if (res.code == 200) {
          res.data.cityList.map(item => {
            item.label = item.name
            item.value = item.id
          })
          this.CityList = res.data.cityList
        }
      })
    },
    getArea() {
      getArea(this.queryFrom.city).then(res => {
        if (res.code == 200) {
          res.data.areaList.map(item => {
            item.label = item.name
            item.value = item.id
          })
          this.AreaList = res.data.areaList
        }
      })
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageData.pageNo = val
      this.getList()
    },
    additions() {
      if (this.cheall) {
        if (this.hospitalId != null) {
          getHospitalDetail(this.hospitalId).then(res => {
            if (res.code == 200) {
              this.viewFrom = res.data.hospital
              this.rentDialogVisible = true
            }
          })
        }
      }
    },
    addsubmit() {
      this.addFrom.hospitalId = this.hospitalId
      this.addFrom.transferType = this.viewFrom.settlementUnit == 2 ? 0 : this.viewFrom.settlementUnit == 3 ? 2 : 1
      getTimeAdd(this.addFrom).then(res => {
        if (res.code == 200) {
          this.$Toast('操作成功')
          this.rentDialogVisible = false
        }
      })
    },
    search() {
      this.pageData={
					pageNo: 1,
					pageSize: 10
				}
      this.getList()
    },
    reset() {
      this.queryFrom = {
        province: '',
        city: '',
        areas: '',
        status: '',
        cooperationType: '',
        hospitalName: ''
      }
      this.indexAC = null
      this.hospitalId = null
      this.cheall = false
      this.getList()
    },
    valueHeld(childParam, fatherparam) {
      this.addFrom[fatherparam] = childParam
    },
    valueHeldS(childParam, fatherparam) {
      this.queryFrom[fatherparam] = childParam
    },

    multifunctionS(val, index) {
      if (this.indexAC == index) {
        this.indexAC = null
        this.hospitalId = null
        this.cheall = false
      } else {
        this.indexAC = index
        this.hospitalId = val
        this.cheall = true
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  }
}
</script>
<style lang="scss" scoped>
.card_content {
  margin-top: 16px;
  height: calc(100% - 170px);
  overflow-y: auto;
}

.card_contents {
  height: calc(100% - 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .card_contents_tex {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
  }

  .card_contents_footer {
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #EFEFEF;
  }
}

.content_h {
  min-height: 149px;
  border-radius: 5px;
  padding: 0px;
}

.title_top {
  min-height: 79px;
  border-bottom: 1px solid #EFEFEF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 20px;
}

.title_tops {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  height: 79px;
  border-bottom: 1px solid #EFEFEF;

  .title_tops_t {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .title_tops_b {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 28px;
    cursor: pointer;

    img {
      width: 24px;
      height: 24px;
      margin-right: 5px;
    }

    span {
      font-size: 16px;
      font-weight: 400;
      color: #000;
    }
  }
}

.screen_case_title {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  margin-right: 35px;
}

.title_top_E {
  font-size: 12px;
  font-weight: 400;
  color: #9898989E;
}

.title_top_C {
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

.screen_case {
  display: flex;
  align-items: center;
  padding: 15px 30px;
  flex-wrap: wrap;
}

.screen_case_amount {
  min-width: 184px;

  // margin-right: 67px;
  .screen_case_amount_lable {
    font-size: 15px;
    color: #989898;
  }

  .screen_case_amount_value {
    font-size: 16px;
    color: #000;
  }
}

.allotbtn {
  margin-right: 15px;
}

::v-deep .el-button.ch_button {
  padding: 8px 9px;
}

::v-deep .el-button.ch_button span {
  display: flex;
  align-items: center;

  div {
    font-size: 13px;
    font-weight: 400;
    margin-left: 4px;
  }
}





.ch_button_img {
  width: 16px;
  height: 16px;
}

.on_line {
  background-color: #19CDA6;
}

.off_line {
  background-color: #FE294D;
}

//新增弹窗
.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .addeteDialog {
  background-color: #FFFFFF;
  max-width: 1268px;
  min-width: 70%;
  border-radius: 6px;
  box-shadow: 0 0 10px #60778E47;
  display: flex;
  flex-direction: column;
  max-height: 70%;
}

::v-deep .addeteDialog .el-dialog__header {
  height: 80px;

  div {
    display: flex;
    flex-direction: column;
  }

  border-bottom: 1px solid #EFEFEF;

  // 自定义弹窗x号
  .el-dialog__close::before {
    content: ' ';
    background: url(../../assets/iconfont/x-circle.png);
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    display: flex;
  }

  .el-dialog__close:active::before {
    background: url(../../assets/iconfont/x-circleactive.png);
    background-size: 20px 20px;
  }
}

::v-deep .addeteDialog .el-dialog__body {
  padding: 17px 20px;
  display: flex;
  overflow: hidden;

  .addeteDialog_conter {
    // border: 1px solid #EFEFEF;
    flex: auto;
    display: flex;
    flex-direction: column;

    .top_content {
      flex: 1;
      min-height: 200px;
      max-height: 580px;
      overflow-y: auto;

      // padding: 20px 23px;
      .top_content_item {
        border: 1px solid #EFEFEF;
        padding: 11px 17px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .top_content_item_title {
          font-size: 20px;
          font-weight: 400;
          color: #000000;
          margin-bottom: 20px;
        }

        .top_content_item_lable {
          font-size: 15px;
          color: #989898;
          font-weight: 400;
          margin-bottom: 14px;
          display: inline-block;
        }

        .top_content_item_value {
          font-size: 16px;
          color: #000000;
          font-weight: 400;
        }

        .top_content_item_foot {
          text-align: center;

          .top_content_item_footT {
            font-size: 12px;
            color: #989898;
          }

          .top_content_item_footT span:nth-child(1) {
            font-size: 32px;
            color: #000;
          }

          .top_content_item_footB {
            // display: flex;
            // flex-direction: column;
            // align-items: center;
            text-align: center;
            font-size: 12px;
            color: #989898;
          }

          .top_content_item_footB span:nth-child(1) {
            font-size: 32px;
            color: #000;
          }
        }

      }

      .top_content_item_s {
        border: 1px solid #EFEFEF;
        padding: 11px 17px;
        margin-bottom: 14px;
      }

      .content_checkbox {
        .title_che {
          margin-top: 20px;
          margin-bottom: 10px;
          font-size: 15px;
          font-weight: 400;
          color: #989898;
        }

        .title_che_sup {
          font-size: 13px;
          font-weight: 400;
          color: #414141;
        }

        .el-checkbox {
          margin-top: 8px;
        }

      }
    }

    .footer_submit {
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid #EFEFEF;
      padding: 10px 0 15px 0;
    }

  }
}

.dialog_title_ch_conter_left {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 33px;

  img {
    width: 100%;
    height: 100%;
  }

  .quan {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid #FFFFFF;
    width: 20px;
    height: 20px;
    border-radius: 100%;
  }
}

::v-deep .ch_button_seav {
  padding: 7px 27px;

  span {
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      font-size: 16px;
      font-weight: 400;
      margin-left: 10px;
    }
  }

}
</style>
